<template>
	<view>
		<myhead :status="true"></myhead>
		<cc-hisSearchBar @search="handleSearch" @confirm="handleConfirm" @input-clear="handleInputClear" v-if="isSearchBar"></cc-hisSearchBar>
		
		<!-- 搜索建议列表 -->
		<view class="searchSuggest"  v-if="!isHideSuggest">
			<scroll-view scroll-y="true" v-for="(item,index) in searchSuggestList" :key="index">
				<view> <image src="../../static/serch.png" style="width: 30rpx; height: 30rpx;" mode=""></image> 
				{{item.keyword}}
				</view>
			</scroll-view>
		</view>
		
		
		
		<!-- 搜索结果列表 -->
		<view class="serachList">
			<scroll-view @click="toSong(item.id)" v-for="(item,index) in searchList" :key="index" style="margin-bottom: 35rpx; border-bottom: 2px solid greenyellow; padding-bottom: 5px;">
				<text>{{item.name}}</text>
				<view class="songPlay">
					<text>作者：{{item.artists[0].name}}</text> 
					<image src="../../static/searchplay.png" @click="toSong(item.id)"  mode=""></image>
				</view> 
			</scroll-view>
		</view>
		
		
		<!-- //热搜列表 -->
		<!-- <view class="hotList" v-if="searchList.length<=0"> -->
		<view class="hotList" v-if="isHide">
			<text style="font-size: 50rpx;">热搜榜</text>
			<scroll-view v-for="(item, index) in hotList" :key="index">
				<text :style="{ color: getHotColor(index) }">{{index + 1}}.</text> 
				<text style="padding-left: 30rpx;">{{item.searchWord}}</text> 
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { searchHot, searchWord, searchSuggest } from '../../common/api.js'

export default {
	data() {
		return {
			isHideSuggest: true, // 初始状态下隐藏搜索建议列表
			isHideResult: true, // 初始状态下隐藏搜索结果列表
			isHide: true,
			isSearchBar:true,
			hotList: [],
			searchList: [],
			searchSuggestList: [],
		}
	},
	onLoad() {
		searchHot().then(res => {
			this.hotList = res.data;
		})
	},
	methods: {
		toSong(id){
			console.log("歌曲id:"+id);
			uni.navigateTo({
				url:"/pages/player/player?id="+id,
			})
		},
		
		 handleInputClear() {
		    this.isHideSuggest = true;
			this.searchSuggestList =[];
			 // 输入框内容清空前确保隐藏搜索建议列表
		  },
		  handleSearch(keyword) {
		    console.log('接收到的搜索关键词:', keyword);
		    this.isHide = this.searchSuggestList.length < 0; // 当搜索建议列表有内容时隐藏热搜列表
		    this.isHideSuggest = false; // 显示搜索建议列表
		    this.isHideResult = true; // 隐藏搜索结果列表
		    // this.isSearchBar=false;
		    // 调用搜索建议接口
			if(keyword){
				searchSuggest(keyword).then(res => {
		      this.searchSuggestList = res.result.allMatch;
		      console.log(res.result.allMatch);
			  this.isHide=false;
		    });}
			this.isHide=true;
			this.searchSuggestList =[];
		    
		  },
		  
		  handleConfirm(keyword) {
		    console.log('确认搜索的关键词:', keyword);
		    this.isHide = this.searchList.length > 0; // 当搜索结果列表有内容时隐藏热搜列表
		    this.isHideSuggest = true; // 隐藏搜索建议列表
		    this.isHideResult = false; // 显示搜索结果列表
		    // this.isSearchBar=false;
		    // 调用搜索接口
		    searchWord(keyword).then(res => {
		      this.searchList = res.result.songs;
		      console.log(res.result.songs[0].artists);
		    });
		  },
		getHotColor(index) {
			if (index < 3) {
				const redScale = [255, 200, 150];
				return `rgb(${redScale[Math.min(index, 2)]}, 0, 0)`;
			} else {
				return 'black';
			}
		}
	}
}
</script>

<style>
.hotList {
	margin-left: 30rpx;
}

.songPlay{
	display: inline;
	display: flex;
	justify-content: space-between;
}

.songPlay image{
	width: 50rpx;
	height: 50rpx;
}
</style>
